<template>
  <BasicModal v-bind="$attrs" @register="registerModal"  destroyOnClose  :title="title" :width="800">
      <!-- <BasicForm @register="registerForm"/> -->
      <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref,reactive} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {saveOrUpdate} from '../DesignFormItemR.api';
    // Emits声明
    const emit = defineEmits(['register','success']);
    const  fApi= ref({});
     const  options=reactive({
        onSubmit: (formData) => {
          // alert(JSON.stringify(formData))
        let param={
          formJson:JSON.stringify(rule.value),
          designFormId:fbid.value
        }
        console.log("param",param);
        // saveOrUpdate(param,false);
        closeModal();
        },

        resetBtn: true,
        submitBtn:true
      })
      const fbid=ref();
      const lcid=ref();
      const rule=ref([]);
    //表单配置
    // const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
        //labelWidth: 150,
        // schemas: formSchema,
        // showActionButtonGroup: false,
        // baseColProps: {span: 24}
    // });
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        setModalProps({showCancelBtn:false,showOkBtn:false});
        console.log("data",data);
        //重置表单
        fbid.value=data.record.designFormId;
        let json=data.record.designFromJson;
        //false为不显示提交按钮 true 为显示
        if(!data.record.isShow){
          options.resetBtn=false;
          options.submitBtn=false;
        }
       
        //转换成对象
        rule.value=JSON.parse(json);
    });
    //设置标题
    const title ='查看表单信息';
    //表单提交事件
    // async function handleSubmit(v) {
    //     try {
    //         // let values = await validate();
    //         setModalProps({confirmLoading: true});
    //         //提交表单
    //         await saveOrUpdate(values, isUpdate.value);
    //         //关闭弹窗
    //         closeModal();
    //         //刷新列表
    //         emit('success');
    //     } finally {
    //         setModalProps({confirmLoading: false});
    //     }
    // }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>